add japanese transration

title: "React v16.13.0"
author: [threepointone]
redirect_from:

• "blog/2020/03/02/react-v16.13.0.html"

本日、React 16.13.0 をリリースします。このリリースには、今後のメジャーリリースに備えて、バグ修正と新しい非推奨の警告が含まれています。

New Warnings {#new-warnings}

Warnings for some updates during render {#warnings-for-some-updates-during-render}

React コンポーネントは、レンダリング中に他のコンポーネントに副作用を与えてはいけません。

レンダリング中に setState を呼び出すことはサポートされていますが 同じコンポーネントに対してのみ*. 別のコンポーネントでレンダリング中に setState を呼び出すと、警告が表示されるようになりました。

Warning: Cannot update a component from inside the function body of a different component.

**この警告は、意図しない状態変更によって引き起こされるアプリケーションのバグを見つけるのに役立ちます。**レンダリングの結果として他のコンポーネントの状態を意図的に変更したい場合は、setState呼び出しをuseEffectにラップすることができます。

Warnings for conflicting style rules {#warnings-for-conflicting-style-rules}

CSSプロパティのlonghandとshorthandを含む style を動的に適用する場合、特定の更新の組み合わせにより、スタイリングの一貫性が失われることがあります。例えば、以下のようになります。

<div style={toggle ? 
  { background: 'blue', backgroundColor: 'red' } : 
  { backgroundColor: 'red' }
}>
  ...
</div> 

この <div> は toggle の値に関係なく常に背景色が赤になると思っていたかもしれません。しかし、このデモを見てわかるように、toggle の値を true と false の間で交互に変更すると、背景色は red から始まり、その後 transparent と blue の間で交互に変更されます。

Reactは、スタイルルールの競合を検出し、警告をログに記録するようになりました。
警告が検出されたソースコードを修正するには、同じCSSプロパティのshortandとlonghandのバージョンをstyleプロップに混在させないようにしてください。

Warnings for some deprecated string refs {#warnings-for-some-deprecated-string-refs}

String Refs は古いバージョンのAPIは開発者に気に入れられておらず、将来的には非推奨になりそうです。

<Button ref="myRef" />

(String Refs と一般的な refs を混同しないでください。)

将来的には、String Refsからの移行を自動化するスクリプト(a "codemod")を提供する予定です。しかし、まれに自動移行できないケースがあります。このリリースでは、非推奨となるケースに先立ち、そのようなケースにのみ警告を追加しています。

例えば、Render Prop パターンと一緒に String Refs を使用した場合に発生します。

class ClassWithRenderProp extends React.Component {
  componentDidMount() {
    doSomething(this.refs.myRef);
  }
  render() {
    return this.props.children();
  }
}

class ClassParent extends React.Component {
  render() {
    return (
      <ClassWithRenderProp>
        {() => <Button ref="myRef" />}
      </ClassWithRenderProp>
    );
  }
}

このようなコードはしばしばバグを示します。(参照は ClassParent で利用できると思っていたかもしれませんが、代わりに ClassWithRenderProp に置かれてしまいます)。

このようなコードを持っていない可能性が高いです。もし持っていて、それが意図的なものであれば、それを React.createRef() の代わりに:

class ClassWithRenderProp extends React.Component {
  myRef = React.createRef();
  componentDidMount() {
    doSomething(this.myRef.current);
  }
  render() {
    return this.props.children(this.myRef);
  }
}

class ClassParent extends React.Component {
  render() {
    return (
      <ClassWithRenderProp>
        {myRef => <Button ref={myRef} />}
      </ClassWithRenderProp>
    );
  }
}

Note

To see this warning, you need to have the babel-plugin-transform-react-jsx-self installed in your Babel plugins. It must only be enabled in development mode.

If you use Create React App or have the "react" preset with Babel 7+, you already have this plugin installed by default.

Deprecating React.createFactory {#deprecating-reactcreatefactory}

React.createFactory はReact要素を作成するための旧版のルパーです。このリリースでは、メソッドに非推奨の警告が追加されています。これは将来のメジャーバージョンで削除される予定です。

React.createFactory の使用法を通常の JSX で置き換えてください。代わりに、この一行ヘルパーをコピー＆ペーストするか、ライブラリとして公開することもできます。

let createFactory = type => React.createElement.bind(null, type);

全く同じことをしています。

Deprecating ReactDOM.unstable_createPortal in favor of ReactDOM.createPortal {#deprecating-reactdomunstable_createportal-in-favor-of-reactdomcreateportal}

React 16がリリースされたとき、createPortalは公式にサポートされるAPIになりました。

しかし、unstable_createPortalを採用している少数のライブラリが動作するように、unstable_createPortalをサポートされたエイリアスとして残していました。現在、この不安定なエイリアスは非推奨となっています。unstable_createPortal の代わりに createPortal を直接使ってください。これは全く同じシグネチャを持っています。

Other Improvements {#other-improvements}

Component stacks in hydration warnings {#component-stacks-in-hydration-warnings}

React は開発警告にコンポーネントスタックを追加し、開発者がバグを分離してプログラムをデバッグできるようにします。今回のリリースでは、以前はなかった多くの開発警告にコンポーネントスタックが追加されました。例として、以前のバージョンにあったこのハイドレーション警告を考えてみましょう。

コードのエラーを指摘していますが、どこにエラーが存在しているのか、次に何をすればいいのかが明確ではありません。このリリースでは、この警告にコンポーネントスタックが追加され、以下のようになりました。

これにより、問題がどこにあるのかが明確になり、より早くバグの場所を特定して修正することができます。

Notable bugfixes {#notable-bugfixes}

このリリースには、他にもいくつかの注目すべき改善点が含まれています。

• 厳密な開発モードでは、React はライフサイクルメソッドを2回呼び出し、不要な副作用の可能性を洗い出すようにしています。このリリースでは、その動作を shouldComponentUpdate に追加しています。これは、shouldComponentUpdateに副作用がない限り、ほとんどのコードには影響しないはずです。これを修正するには、副作用のあるコードを componentDidUpdate に移動してください。

• 厳密な開発モードでは、レガシーコンテキストAPIの使用に関する警告には、警告のトリガーとなったコンポーネントのスタックが含まれていませんでした。このリリースでは、不足していたスタックが警告に追加されます。

• 無効な <button> 要素に対して onMouseEnter がトリガーされないようになりました。

• ReactDOM は v16 を公開して以来、version のエクスポートがありませんでした。このリリースではそれが追加されました。アプリケーションロジックでの使用はお勧めしませんが、同じページ上のReactDOMのバージョンの不一致や複数のバージョンの問題をデバッグする際に便利です。

これらの問題やその他の問題を解決してくれた貢献者に感謝します。完全なchangelog 下記を参照してください。

Installation {#installation}

React {#react}

React v16.13.0 はnpmで利用可能です。

YarnでReact 16をインストールするには、下記を実行します

yarn add react@^16.13.0 react-dom@^16.13.0

npmでReact 16をインストールするには、下記を実行します

npm install --save react@^16.13.0 react-dom@^16.13.0

また、CDN経由でReactのUMDビルドも提供しています

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

詳細のスクリプト設置方法については、説明書を参照してください。

Changelog {#changelog}

React {#react}

• Warn when a string ref is used in a manner that's not amenable to a future codemod (@lunaruan in #17864)
• Deprecate React.createFactory() (@trueadm in #17878)

React DOM {#react-dom}

• Warn when changes in style may cause an unexpected collision (@sophiebits in #14181, #18002)
• Warn when a function component is updated during another component's render phase (@acdlite in #17099)
• Deprecate unstable_createPortal (@trueadm in #17880)
• Fix onMouseEnter being fired on disabled buttons (@AlfredoGJ in #17675)
• Call shouldComponentUpdate twice when developing in StrictMode (@bvaughn in #17942)
• Add version property to ReactDOM (@ealush in #15780)
• Don't call toString() of dangerouslySetInnerHTML (@sebmarkbage in #17773)
• Show component stacks in more warnings (@gaearon in #17922, #17586)

Concurrent Mode (Experimental) {#concurrent-mode-experimental}

• Warn for problematic usages of ReactDOM.createRoot() (@trueadm in #17937)
• Remove ReactDOM.createRoot() callback params and added warnings on usage (@bvaughn in #17916)
• Don't group Idle/Offscreen work with other work (@sebmarkbage in #17456)
• Adjust SuspenseList CPU bound heuristic (@sebmarkbage in #17455)
• Add missing event plugin priorities (@trueadm in #17914)
• Fix isPending only being true when transitioning from inside an input event (@acdlite in #17382)
• Fix React.memo components dropping updates when interrupted by a higher priority update (@acdlite in #18091)
• Don't warn when suspending at the wrong priority (@gaearon in #17971)
• Fix a bug with rebasing updates (@acdlite and @sebmarkbage in #17560, #17510, #17483, #17480)